<template>
  <div>
    <h1>动态组件demo</h1>
    <!-- <Son1 v-if="show"></Son1>
    <Son2 v-else></Son2>
    <button @click="toggle">toggle</button> -->
    <component :is="name"></component>
  </div>
</template>
<script>
// vue中内置一个组件 component is 属性可以指定渲染的组件
// 确定要切换的组件已经注册 通过组件名进行切换
// 通过一个按钮控制2个组件的切换
import Son1 from "./Son1.vue";
import Son2 from "./Son2.vue";
export default {
  components: { Son1, Son2 },
  data() {
    return {
      show: true,
      name: "Son2",
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
};
</script>
